<notempty name="list">
<link rel="stylesheet" type="text/css" media="all" href="__ADDONROOT__/slider.css">
<style type="text/css">
.flexslider{border-radius: 0px;} .flexslider .slides img {width: <{$addons_config.width}>; height:<{$addons_config.height}>; display: block;}

</style>
<section id="slider_wrapper" class="slider_content">	
	<div class="container">
		<div class="row clearfix">
			<div class="<eq  name="addons_config.show_model" value="3">col-md-12<else/>col-md-8</eq>">
				<div class="flexslider animate_ftr long">
					<ul class="slides">
						<volist name="list" id="vo">
						<li>
							<img src="<{$vo.path}>" alt="" data-custom-thumb="<{$vo.path}>">
							<section class="slide_caption t_align_c d_xs_none">
								<div class="f_size_large color_light tt_uppercase slider_title_4 m_bottom_10 hidden-xs"><b><{$vo.title}></b></div>
								<hr class="slider_divider d_inline_b m_bottom_10 hidden-sm hidden-xs">
								<div class="color_light slider_title_3 tt_uppercase t_align_c m_bottom_45 hidden-sm hidden-xs"><{$vo.description}></div>
								<a href="<{$vo.link}>" role="button" class="d_sm_inline_b button_type_4 bg_scheme_color color_light r_corners tt_uppercase tr_all_hover"><{$vo.link_title}></a>
							</section>
						</li>
						</volist>
					</ul>
				</div>
			</div>
			<neq  name="addons_config.show_model" value="3">				
			<div class="col-md-4 t_xs_align_c s_banners hidden-xs hidden-sm">				
				<div class="bg_light_color_3" style="height:<{$addons_config.height}>;">
					<if condition="$addons_config.show_model eq 1 ">
					<div class="clearfix">
						<h3 class="color_dark m_bottom_10 f_left">
							<span class=""><i class="fa fa-clock-o color_green m_right_10"></i>最近听过 </span>
						</h3>	
						<button class="tr_delay_hover r_corners button_type_16 color_dark bg_light_color_2 m_bottom_10 f_right list_play">
						<i class="fa fa-play-circle m_right_6"></i>开始播放
						</button>
					</div>
					<hr class="divider_type_6 m_top_0 m_xs_bottom_10">
					<div class="t_align_c v_align_m loading" >
						<img src="__ADDONROOT__/images/loader.gif"  alt="正在努力加载....">
					</div>
					<div class="c_info_list d_none" id="record_list">
						<div class="custom_scrollbar" style="height:<{:str_replace('px','',$addons_config['height'])-83}>px;">
						</div>
					</div>
					<script type="text/javascript">
					$(function ($) {
						$.post(JYMUSIC.APP+"/Music/listenRecord", 
							function (data){
								$('.loading').hide();
					    		if(data) {
					   			 	//alert(data.length);	
									var html='<ul class="a_s_list">',listObj=$('#songs_list');
									for (i = 0; i < data.length; i++) {					 
										html+= '<li class="m_bottom_10">'+
													'<a class="jp-play-me m-r-sm pull-left m_right_10" href="javascript:;" data-id="'+data[i].id+'">'+
														'<i class="fa fa-play sow"></i>'+
														'<i class="fa fa-pause hde"></i>'+
													'</a>'+
													'<a class="text-ellipsis color_dark play_name jp-play-me" href="javascript:;" data-id="'+data[i].id+'">'+data[i].artist_name+' - '+data[i].name+'</a>'+						
												'</li>';
									}
									html=html+'</ul>'
					    		}else{
					    			html="暂无记录"; 	
					    		}
					    		
								$('#record_list').find('.custom_scrollbar').html(html)
								$('#record_list').show();	
					  	}, "json");
					});
					</script>
					<elseif condition="$addons_config.show_model eq 2"/>						
                    <div class="icon-box style3 counters-box t_align_c" style="height:100%">
                        	<h3><i class="soap-icon-entertainment fa fa-music hotel-color m_right_10 scheme_color"></i><{:C('WEB_SITE_NAME')}>音乐总量</h3>
                            <div class="numbers">
                            	<i class="soap-icon-support select-color color_grey fa fa-headphones"></i>
                                <span class="display-counter" data-value="<{$songsCount}>">0</span>
                            </div>
                            <div class="description t_align_l" id="hotel-write-review">
                            	<h5 class="m_bottom_20 m_top_10"><i class="soap-icon-block fa fa-th"></i> 快速入口</h5>
                            	<ul class="sort-trip clearfix">
                                    <li class="m_top_10"><a href="<{:U('/User/music/share')}>"><i class="fa  fa-cloud-upload soap-icon-arrow-top  circle"></i></a><span>分享音乐</span></li>
                                    <li class="m_top_10"><a href="#"><i class="soap-icon-couples circle"></i></a><span>添加功能</span></li>
                                    <li class="m_top_10"><a href="#"><i class="soap-icon-family circle"></i></a><span>添加功能</span></li>
                                    <li class="m_top_10"><a href="<{:U('/User/fav/index')}>"><i class="soap-icon-wishlist fa  fa-heart circle"></i></a><span>我的收藏</span></li>
                                </ul>
                            </div>
                    </div>
                    <script type="text/javascript">
                    $(function () {
                    	 if(!$().countTo) {
                    	 	var that = $('.display-counter');
                    	 	var num = that.attr('data-value');
                    	 	that.text(num);
                    	 }                   	
                    })
                    </script>
					</if>
				</div>
			</div>
			</neq>
		</div>
	</div>
</section>
<hr class="divider_type_6 m_top_0 m_xs_bottom_20">
<script src="__ADDONROOT__/jquery.flexslider-min.js"></script>
<script type="text/javascript">
// flexslider 幻灯片
(function(){
	var flx = $('.flexslider:not(.simple_slide_show)');

	if(flx.length){
		flx.flexslider({
			animation : "<{$addons_config.animation}>", 			//"fade" or "slide"图片变换方式：淡入淡出或者滑动
			animationSpeed : 1000,
			slideshowSpeed: <{$addons_config.Speed}>,           //自动播放速度毫秒
			animationDuration: <{$addons_config.animationTime}>,         //动画淡入淡出效果延时
			prevText: "<i class='fa fa-angle-left'></i>",
			nextText: "<i class='fa fa-angle-right'></i>",
			slideshow:<{$addons_config.slideshow}>,
			start: function(){
   			var image = $('.flexslider [data-custom-thumb]'),
	   			len = image.length,
	   			bullet = $('.flex-control-nav li');
	   			for(var i = 0; i < len; i++){
	   				bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i+1).data('custom-thumb') + '" alt=""></div>');
	   			}
				$('.flex-control-nav li').each(function(){
					var curr = $(this);
					curr.on("mouseenter mouseleave",function(){
						curr.children('.custom_thumb').toggleClass('active')
					});
				});
				bullet.find('.custom_thumb').on('click',function(){
					return false;
				});
			}
		});
	}
})();
</script>
</notempty>